<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        computed 是以属性的方式访问,有缓存 {{temp}}
        methods  是需要通过()来执行函数体  {{temp()}}

        如果页面中有多次调用 computed 调用一次 , methods 有多少次调用执行多少回

        对于复杂的逻辑计算时,选用计算属性.

        watch: 当数据发生变化时,需要去执行其他的响应操作时 (AJAX 或者 其他开销较大的操作)
     -->
     <div id="app">
         <input type="text" v-model="first">
         <input type="text" v-model="last">
         <div>
             {{fullname}} {{fullname}} {{fullname}}
         </div>
         <div>
             {{getFullName()}} {{getFullName()}} {{getFullName()}}
         </div>
     </div>
     <script src="js/vue.js"></script>
     <script>
         let vm = new Vue({
             el:"#app",
             data:{
                 first:'',
                 last:''
             },
             computed:{
                 fullname(){
                     console.log("computed");
                     return this.first + this.last
                 }
             },
             methods:{
                 getFullName(){
                     console.log("methods");
                     return this.first + this.last
                 }
             }
         })
     </script>
</body>
</html>